<template>
	<view class="ownerlist">
		<!--  -->
		<view class="owner" v-for="(item,index) in list" :key="index" 
		@click="toinfo(item)">
			<view class="img" v-if="type!=2">
				<image :src="item.profilePhoto" mode="aspectFill"></image>
			</view>
			<view class="txt" >
				<view class="name" >
					<text>{{item.name || "小程序用户"}}</text> 
				</view>
				<!-- 员工 -->
				<view class="tip" v-if="type==0">
					<text class="text2">{{item.age}}岁｜总接单 {{item.orderNum}}｜粉丝 {{item.fansNum}}｜评价 {{item.evaluateNum}}</text>
				</view>
				<view class="tip" v-if="item.workTags && type==0">
					<text class="text" v-for="it in item.workTags.split(',')" :key="it">
						{{it}}
					</text> 
				</view>
				<!-- 商家 -->
				<view class="tip" v-if="type==1">
					<text class="text2">入驻{{item.yearsAgo}}年｜总接单 {{item.orderNum}}｜粉丝 {{item.fansNum}}</text>
				</view>
				<view class="tip" v-if="item.workTags && type==1">
					<text class="text" v-for="it in item.workTags.split(',')" :key="it">
						{{it}}
					</text> 
				</view>
				<!-- 产品 -->
				 <view class="tip" v-if="type==2" style="font-weight: 500;font-size: 28rpx;color: #666666;">
				 	<text style="font-weight: 600;font-size: 40rpx;color: #277EEF;margin-right: 5rpx;">{{item.money}}</text> 元/套
				 </view>
			</view>
			 
			<view class="appointment">
				 
				<image v-if="item.isCollect==0" @click.stop="handleCollect('create',item,index)"
				src="@/static/home/homelist/sc02.png" mode="widthFix"></image>
				<image v-else @click.stop="handleCollect('delete',item,index)"
				src="@/static/home/homelist/sc01.png" mode="widthFix"></image>
			</view>
		</view>
		
		<no-data v-if="list.length==0"/>
	</view>
	
</template>

<script>
	import {collectionListAPI} from "@/api/user.js"
	import {staffscAPI,} from "@/api/home.js"
	import {merchantscdelAPI ,merchantscAPI,memberCollectDeleteAPI,memberCollectCreateAPI} from "@/api/appointment.js"
	import pageing from "@/mixins/pageing.js"
	
	export default {
		mixins:[pageing], 
		data() {
			return {
				list: [],
				type:'0'//0人员1商户2.商品
			};
		},
		onLoad(option) {
			if(option.type){
				this.type=option.type
				let name=""
				switch (this.type){
					case "0":
						 name="人员收藏"
						break;
					case "1":
						 name="商户收藏"
						break;
					case "2":
						 name="套餐收藏"
						break;
					 
				}
				uni.setNavigationBarTitle({
					title:name
				})
				this.getlist()
			}
		},
		methods:{
			toinfo(item){
				switch (this.type){
					case "0":
						this.tourl('/pages/appointment/waiterInfo?id='+item.id)
						break;
					case "1":
						this.tourl('/pages/appointment/storeInfo?id='+item.id)
						break;
					case "2":
						this.tourl('/pages/appointment/goodsInfo?id='+item.id)
						break;
					 
				}
				
			},
			getlist(){
				collectionListAPI(this.type,{
					"pageNo": this.pageNo,
					"pageSize":  this.pageSize   
				}).then(res=>{
					this.total=res.total
					this.list = this.list.concat(res.list);
				})
			},
			handleCollect(url,item,index){
				switch (this.type){
					case "0":
							staffscAPI(url,{
								staffId:item.id
							}).then(res=>{
								this.pageNo=1 
								this.list=[]
								this.getlist()
							})
						break;
					case "1":
						 let action=url=='create'? merchantscAPI :merchantscdelAPI
						 action({
						 	merchantId:item.id
						 }).then(res=>{
						 	 this.pageNo=1
						 	 this.list=[]
						 	 this.getlist()
						 	 
						 })
						break;
					case "2":
						 let action2=url=="delete"?memberCollectDeleteAPI:memberCollectCreateAPI
						 action2({
						 	categoryId:item.id,
						 	id:item.id,
						 }).then(res=>{
						 	this.pageNo=1
						 	this.list=[]
						 	this.getlist()
						 })
						break;
					 
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.ownerlist{
	padding: 20rpx; 
	background-color: #F8F8F8;
	min-height: 100vh;
	.owner{
		display: flex;
		align-items: center;
		background-color: #fff;  
		border-radius:20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.img{
			width: 120rpx;
			height: 150rpx;
			overflow: hidden;
			border-radius: 10rpx;
			margin-right: 20rpx; 
			background-color: #f1f1f1;
			image{
				border-radius: 10rpx;
				height: 150rpx;
				width: 120rpx;
			}
		}
		.txt{
			padding: 10rpx 2rpx;
			flex: 1;
			.name{
				font-weight: bold;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					margin: 0 15rpx;
				} 
			}					 
			.tip{
				display: flex;
				align-items: center; 
				flex-wrap: wrap;
				margin-top: 10rpx;
				.text{
					padding: 8rpx 12rpx; 
					background: #F5F5F5;
					border-radius:4rpx;
					margin: 5rpx;
					font-size: 20rpx;
					color: #999999;
					line-height: 23rpx;
				}
				.text2{
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					line-height: 23rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				image{
					width: 128rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}
		
		.appointment{
			width: 60rpx;
			image{
				width: 40rpx;
			} 
		}
	
	}
}
</style>